<template>
  <div id="userSystem">
    <div class="titleLogo" v-if="isShow">
      <div class="menu">
					<span @click="switchPage('index')" :class="selectTabs == 'index' ? 'selectMenu' : ''">Star River
					</span>
        <span @click="switchPage('dataStatistics')"
              :class="selectTabs == 'dataStatistics' ? 'selectMenu' : ''">矿池数据统计</span>
        <span @click="switchPage('checkEarning')"
              :class="selectTabs == 'checkEarning' ? 'selectMenu' : ''">查看收益</span>
        <span @click="switchPage('promotionInvitation')"
              :class="selectTabs == 'promotionInvitation' ? 'selectMenu' : ''">推广邀请</span>
        <span @click="switchPage('appDownload')"
              :class="selectTabs == 'appDownload' ? 'selectMenu' : ''">APP</span>
        <span @click="switchPage('personCenter')" :class="selectTabs == 'personCenter' ? 'selectMenu' : ''"
              v-if="showMenu">个人中心</span>
        <span @click="switchPage('helpCenter')"
              :class="selectTabs == 'helpCenter' ? 'selectMenu' : ''">帮助中心</span>
      </div>
      <div class="menu-mobile">
        <a-button type="primary" @click="toggleCollapsed">
          <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" style="font-size: 20px"/>
        </a-button>
      </div>
      <div class="loginWrap">
        <span @click="zhuce" v-if="!showMenu">注册</span>
        <a-button type="primary" ghost class="loginBtn" @click="loginIn" v-if="!showMenu">登录</a-button>
        <div class="userAvatar" style="position: relative" v-if="showMenu">
          <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                    style="position: relative;top:-5px;left: 10px;margin: 0px" @click="showLogout"/>
          <span @click="showLogout">鲸友{{nickName}}</span>
          <div class="logout" v-if="showOut">
            <p @click="loginOut">退出登录</p>
          </div>
        </div>
      </div>
    </div>
    <transition name="moveL">
      <div class="menu-list" v-if="collapsed">
        <div @click="collapsed = false">
          <a-icon type="close" style="font-size: 24px"/>
        </div>
        <div>
						<span @click="switchPage('index')" :class="selectTabs == 'index' ? 'selectMenu' : ''">Star River
						</span>
        </div>
        <div>
						<span @click="switchPage('dataStatistics')"
                  :class="selectTabs == 'dataStatistics' ? 'selectMenu' : ''">矿池数据统计</span>
        </div>
        <div>
						<span @click="switchPage('checkEarning')"
                  :class="selectTabs == 'checkEarning' ? 'selectMenu' : ''">查看收益</span>
        </div>
        <div>
						<span @click="switchPage('promotionInvitation')"
                  :class="selectTabs == 'promotionInvitation' ? 'selectMenu' : ''">推广邀请</span>
        </div>
        <div>
						<span @click="switchPage('appDownload')"
                  :class="selectTabs == 'appDownload' ? 'selectMenu' : ''">APP</span>
        </div>
        <div>
						<span @click="switchPage('personCenter')"
                  :class="selectTabs == 'personCenter' ? 'selectMenu' : ''" v-if="showMenu">个人中心</span>
        </div>
        <div>
						<span @click="switchPage('helpCenter')"
                  :class="selectTabs == 'helpCenter' ? 'selectMenu' : ''">帮助中心</span>
        </div>
      </div>
    </transition>
    <router-view/>
    <div class="footer" v-if="isShow">
      <a-row>
        <a-col :span="10" class="footer-col10">
          <div><span>Star River</span></div>
          <p class="left-p1">公司名称：創博科技发展有限公司</p>
          <p class="left-p2">© 2021 StarRiver 版权所有</p>
        </a-col>
        <a-col :span="14" class="footer-col14">
          <a-col :span="10" class="footer-p">
            <p>星河鲸鱼产品</p>
            <p>APP下载</p>
            <p>APP使用手册</p>
          </a-col>
          <a-col :span="7" class="footer-p">
            <p>提供服务</p>
            <p>提交工单</p>
          </a-col>
          <a-col :span="7" class="footer-p">
            <p>用户帮助</p>
            <p>视频教程</p>
            <p>常见问题</p>
          </a-col>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
  import {
    eventBus
  } from '@/eventBus';
  import {
    getLocalStorage,
    setLocalStorage,
    removeLocalStorage
  } from "../serves/localStorage";
  import {
    refreshToken
  } from "../serves";

  export default {
    components: {},
    data() {
      return {
        selectTabs: '',
        isShow: true,
        manageUrl: ['userManage', 'bargainManage', 'withdrawalManage', 'millManage', 'hashrateMange',
          'noticeManage', 'promoteManage'
        ],
        showMenu: false,
        nickName: '',
        showOut: false,
        timer1: null,
        collapsed: false
      }
    },
    watch: {
      '$route': {
        handler(val) {
          this.selectTabs = val.name
          if (this.manageUrl.indexOf(val.name) >= 0) {
            this.isShow = false
          } else {
            this.isShow = true
          }
        },
        deep: true
      },
    },
    mounted() {
      this.nickName = getLocalStorage('nickName') ? getLocalStorage('nickName') : ''
      this.showMenu = getLocalStorage('accessToken') ? true : false
      eventBus.$on('isShow', (val) => {
        this.showMenu = val
        if (val) {
          this.refreshAccessToken()
        } else {
          removeLocalStorage('accessToken')
        }
      });
      eventBus.$on('nickName', (val) => {
        this.nickName = val
      });
      document.addEventListener('click', (e) => {
        const userCon = document.getElementsByClassName('userAvatar')[0]
        if (userCon && !userCon.contains(e.target)) {
          this.showOut = false
        }
      })
    },
    methods: {
      toggleCollapsed() {
        this.collapsed = !this.collapsed;
      },
      refreshAccessToken() {
        let params = {
          refreshToken: getLocalStorage('refreshToken')
        }
        refreshToken(params).then(res => {
          if (res.status == 200 && res.data.status == 200) {
            setLocalStorage('accessToken', res.data.data.accessToken)
            setLocalStorage('refreshToken', res.data.data.refreshToken)
          }
        })
        this.timer1 = setTimeout(() => {
          this.refreshAccessToken()
        }, 60 * 1000 * 30)
      },
      zhuce() {
        this.$router.push('register')
      },
      loginIn() {
        this.$router.push('login')
      },
      showLogout() {
        this.showOut = !this.showOut
      },
      loginOut() {
        removeLocalStorage('accessToken')
        removeLocalStorage('refreshToken')
        removeLocalStorage('nickName')
        clearTimeout(this.timer1)
        this.$router.push('login')
        this.showMenu = false
        this.showOut = false
      },
      switchPage(val) {
        if (!getLocalStorage('accessToken') && (val == 'checkEarning' || val == 'promotionInvitation')) {
          this.$message.warning('请先登录')
          this.$router.push('login')
        } else {
          this.selectTabs = val
          this.collapsed = false
          this.$router.push(val)
        }
      }
    }
  }
</script>

<style lang="scss">

  .titleLogo {
    background-color: #1E0294;
    padding: 20px 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    span {
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      margin: 0px 10px;
    }

    .menu-mobile {
      display: none;
    }

    .menu {
      display: flex;
      justify-content: space-around;
      align-items: center;

      span:nth-child(1) {
        font-size: 20px;
        font-weight: 700;
      }

      span:hover {
        color: #1ebfca;
      }

      .selectMenu {
        color: #1ebfca;
      }
    }

    .loginWrap {
      display: flex;
      align-items: baseline;
      justify-content: space-between;

      .userAvatar {
        position: relative;

        .logout {
          position: absolute;
          top: 50px;
          width: 100px;
          color: #fff;
          font-size: 16px;
          background-color: #1E0294;
          border-radius: 5px;
          cursor: pointer;
          z-index: 10;

          p {
            margin: 0px;
          }
        }
      }

    }

    .loginBtn {
      border: 2px solid #27FFC7 !important;
      border-radius: 20px;

      span {
        color: #27FFC7 !important;
      }

    }
  }

  .menu-list {
    display: none;
  }

  .footer {
    background-color: #222831;
    padding-top: 50px;

    .footer-col10 {
      text-align: left;
      padding-left: 100px;

      .left-p1 {
        color: #ccc;
        font-size: 16px;
        margin-top: 10px
      }

      .left-p2 {
        color: #ccc;
        margin-top: 100px;
        font-size: 16px
      }

      span {
        font-size: 26px;
        font-weight: 500;
        color: #fff;
        position: relative;
        top: 10px;
        margin-left: 15px
      }
    }

    .footer-col14 {
      padding-right: 120px
    }

    .footer-p {
      color: #ccc;
      font-size: 18px;
      padding: 20px;

      p {
        text-align: right;
      }

      p:nth-child(1) {
        color: #1ABEC9;
        margin-bottom: 40px;
        font-weight: 700;
      }
    }
  }

  @media screen and (max-width: 800px) {
    .titleLogo {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        margin: 0px 5px;
      }

      .menu-mobile {
        display: block;
        position: relative;
        left: -10px;

        .ant-btn {
          background-color: transparent;
          border-color: transparent;
        }

        .ant-btn-primary:hover,
        .ant-btn-primary:focus {
          background-color: transparent;
          border-color: transparent;
        }
      }

      .menu {
        display: none;
      }

      .loginWrap {
        display: flex;
        align-items: baseline;
        justify-content: space-around;

        .userAvatar {
          position: relative;

          .logout {
            position: absolute;
            top: 42px;
            right: -10px;
            width: 80px;
            color: #fff;
            font-size: 16px;
            background-color: #1E0294;
            border-radius: 0px;
            cursor: pointer;

            p {
              margin: 0px;
            }
          }
        }

      }

      .loginBtn {
        border: none !important;
        border-radius: 20px;
        height: 30px;
        line-height: 30px;
        padding: 0px;
        margin: 0px 5px;

        span {
          color: #27FFC7 !important;
        }

      }
    }

    .moveL-enter-active,
    .moveL-leave-active {
      transition: all 0.2s linear;
      transform: translateX(0%);
    }

    .moveL-enter,
    .moveL-leave {
      transform: translateX(-100%);
    }

    .moveL-leave-to {
      transform: translateX(-100%);
    }

    .menu-list {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      color: #fff;
      text-align: left;
      font-size: 18px;
      z-index: 100;
      background-color: rgba(0, 0, 0, 0.6);

      div {
        margin: 20px;
      }

      .selectMenu {
        color: #1ebfca;
      }
    }

    .footer {
      padding-top: 5px;

      .footer-col10 {
        text-align: left;
        padding-left: 10px;

        .left-p1 {
          font-size: 12px;
          margin-top: 10px
        }

        .left-p2 {
          margin-top: 10px;
          font-size: 12px
        }

        span {
          font-size: 16px;
          font-weight: 500;
          color: #fff;
          position: relative;
          top: 10px;
          margin-left: 5px
        }
      }

      .footer-col14 {
        padding-right: 10px
      }

      .footer-p {
        color: #ccc;
        font-size: 12px;
        padding: 10px 0px;

        p {
          text-align: right;
        }

        p:nth-child(1) {
          color: #1ABEC9;
          margin-bottom: 5px;
          font-weight: 700;
        }
      }
    }
  }

  #nav {
    padding: 30px;

    a {
      font-weight: bold;
      color: #2c3e50;

      &.router-link-exact-active {
        color: #42b983;
      }
    }
  }

  #components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  #components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
  }
</style>
